JavaScript技巧分享——纯数字（带小数点）过滤

应用场景

在编写输入金额的输入组件input时，虽然能够设置type为number，但却不能够自动检验用户输入的值是否符合金额的格式。比如，用户能够同时输入两个小数点。本文章以此为大前提展开略浅的技巧。

过程解析

原始状态

说到校验，第一个想到的就是用正则表达式。以微信小程序为例。

DOM结构

...
<input type='digit' value='{{value}}' bindinput='numChange' />
...

JavaScript逻辑

...
numChange(e) {
  // 修改单次金额
  const next = e.detail.value;
  const currentValue = this.data.value;
  const newValue = this.numCheck(currentValue, next);
  this.setData({
    value: newValue || currentValue
  })
},
numCheck(prev, next) {
  // 数据过滤
  // 只保留两位小数
  const pattern = /^(([1-9]\d*)|0)(\.\d{0,2}?)?$/
  if (next && !pattern.test(next)) {
    if (next === '.') return '0.';
    return prev;
  }
  return next;
}
...

获取非空数据并且转换数据类型

因为经过过滤后，返回的数据类型是字符串，在使用时，需要再转换一下数据类型。

...
getPureMoney() {
  // 获取干净的数据（非空）
  const { value } = this.data;
  const parsedValue = parseFloat(value);
  return !isNaN(parsedValue) ? parsedValue : '';
},
...

用过都说好！

最后，嘻嘻！